<template>
  <div class="home">
    <div id="container"></div>
    <div class="home_main">
      <!-- <p style="height: 0.325rem;"></p> -->
      <p class="title colorF font_s30 textC weightBold">浦东新区社会组织协同监管平台</p>
      <div class="flex JustifyContentSA">
        <div class="flex" style="margin-top: -2.5rem;">
          <div class="title_box Bold colorF flexC JustifyContentC cursor" @click="model1 = true">
            <p class="font_s18 weightBold" style="padding-left: 2.5rem;">民办非企业单位</p>
            <p class="textR" style="padding-right: 2rem;">
              <span class="font_s22" style="color: #F8E24D;">{{MFNUM}}</span>
              <span>家</span>
            </p>
          </div>
          <div class="title_box Bold colorF flexC JustifyContentC cursor" @click="model = true">
            <p class="font_s18 weightBold" style="padding-left: 2.5rem;">社会团体</p>
            <p class="textR" style="padding-right: 2rem;">
              <span class="font_s22" style="color: #F8E24D;">{{STNUM}}</span>
              <span>家</span>
            </p>
          </div>
        </div>
        <ul class="flex colorF nav textC">
          <li class="cursor"><p :class="{ active: isActive === 2 }" @click="openurl(2)">综合监管</p></li>
          <li class="cursor"><p :class="{ active: isActive === 1 }" @click="openurl(1)">数据海</p></li>
          <li class="cursor"><p :class="{ active: isActive === 3 }" @click="openurl(3)">机构管理</p></li>
        </ul>
        <div class="flex" style="margin-top: -2.5rem;">
          <div class="title_box Bold colorF flexC JustifyContentC cursor" @click="model2 = true">
            <p class="font_s18 weightBold" style="padding-left: 2.5rem;">基金会</p>
            <p class="textR" style="padding-right: 2rem;">
              <span class="font_s22" style="color: #F8E24D;">{{JJHNUM}}</span>
              <span>家</span>
            </p>
          </div>
          <div class="title_box Bold colorF flexC JustifyContentC cursor" @click="model3 = true">
            <p class="font_s18 weightBold" style="padding-left: 2.5rem;">婚介机构</p>
            <p class="textR" style="padding-right: 2rem;">
              <span class="font_s22" style="color: #F8E24D;">{{HLNUM}}</span>
              <span>家</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="font_s16 Bold category flexC JustifyContentSA cursor" style="color: #E9FEFD;">
      <p @click="switchmap(1)">
        <img class="verticM" style="height: 1.5rem;padding:0 1rem;" :src="category === 1 ? `${url}img/14.png` : `${url}img/15.png`" alt="" />社团
      </p>
      <p @click="switchmap(2)">
        <img class="verticM" style="height: 1.5rem;padding:0 1rem;" :src="category === 2 ? `${url}img/14.png` : `${url}img/15.png`" alt="" />民非
      </p>
      <p @click="switchmap(3)">
        <img class="verticM" style="height: 1.5rem;padding:0 1rem;" :src="category === 3 ? `${url}img/14.png` : `${url}img/15.png`" alt="" />基金会
      </p>
     <p @click="switchmap(4)">
        <img class="verticM" style="height: 1.5rem;padding:0 1rem;" :src="category === 4 ? `${url}img/14.png` : `${url}img/15.png`" alt="" />婚介机构
      </p>
    </div>
    <!------------ 组件调用 -------------->
    <ModalBlue v-if="model1" @hidden="hidden1">
      <MinBanFeiQiYeDanWei></MinBanFeiQiYeDanWei>
    </ModalBlue>
    <!-- <Modal v-if="model1" @hidden="hidden1">
      <MinBanFeiQiYeDanWei></MinBanFeiQiYeDanWei>
    </Modal> -->
    <ModalBlue v-if="model" @hidden="hidden">
      <SheHuiTuanTi></SheHuiTuanTi>
    </ModalBlue>
    <ModalBlue v-if="model2" @hidden="hidden2">
      <JiJinHui></JiJinHui>
    </ModalBlue>
    <ModalBlue v-if="model3" @hidden="hidden3">
      <HunJieJiGou></HunJieJiGou>
    </ModalBlue>
    <router-view />
  </div>
</template>

<script>
import MinBanFeiQiYeDanWei from './home/MinBanFeiQiYeDanWei.vue'
import SheHuiTuanTi from './home/SheHuiTuanTi.vue'
import JiJinHui from './home/JiJinHui.vue'
import HunJieJiGou from './home/HunJieJiGou.vue'
import { STlist, MFlist, JJHlist, HJlist } from '@/data.js'
import { mapFun } from '@/components/gdmap'
import ModalBlue from '@/components/ModalBlue.vue'
import { getSocialOrganization } from '@/api/home'

export default {
  name: 'home',
  components: {
    MinBanFeiQiYeDanWei,
    SheHuiTuanTi,
    JiJinHui,
    HunJieJiGou,
    ModalBlue
  },
  data () {
    return {
      isActive: 2,
      category: 1,
      model: false,
      model1: false,
      model2: false,
      model3: false,
      url: process.env.BASE_URL,
      MFNUM: '',
      JJHNUM: '',
      HLNUM: '',
      STNUM: ''
    }
  },
  mounted () {
    this.gdmap()
    getSocialOrganization().then((data) => {
      if (data.success && data.data) {
        this.MFNUM = data.data.MFNUM
        this.JJHNUM = data.data.JJHNUM
        this.HLNUM = data.data.HLNUM
        this.STNUM = data.data.STNUM
      }
    })
  },
  methods: {
    hidden () {
      this.model = false
    },
    hidden1 () {
      this.model1 = false
    },
    hidden2 () {
      this.model2 = false
    },
    hidden3 () {
      this.model3 = false
    },
    openurl (index) {
      this.isActive = index
      if (index === 2) {
        this.$router.push('/comprehensive')
      } else if (index === 1) {
        this.$router.push('/datasea')
      } else if (index === 3) {
        this.$router.push('/organization')
      }
    },
    gdmap () {
      let map = new AMap.Map('container', {
        resizeEnable: true,
        mapStyle: 'amap://styles/dark',
        zoom: 11,
        pitch: 40,
        rotation: 45,
        viewMode: '3D',
        center: [121.510285, 31.199675]
      })
      this.$root.MapGd = map
      mapFun(map, STlist)
    },
    switchmap (index) {
      this.category = index
      if (index === 1) {
        mapFun(this.$root.MapGd, STlist)
      } else if (index === 2) {
        mapFun(this.$root.MapGd, MFlist)
      } else if (index === 3) {
        mapFun(this.$root.MapGd, JJHlist)
      } else if (index === 4) {
        mapFun(this.$root.MapGd, HJlist)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  #container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .home_main {
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    .title {
      padding: 1rem 0 2.5rem 0;
      background: url(../assets/img/home/11.png) no-repeat;
      background-size: auto 100%;
      background-position: center;
    }
    .title_box {
      width: 16.625rem;
      height: 5.9375rem;
      background: url(../assets/img/home/12.png) no-repeat;
      background-size: 100% 100%;
    }
    .nav {
      li {
        width: 7.8125rem;
        height: 3.25rem;
        line-height: 3.25rem;
        background: url(../assets/img/home/13.png) no-repeat;
        background-size: 100% 100%;
      }
      li:nth-child(2) {
        margin: 0 1rem;
      }
      .active {
        color: #f3c050;
        margin: 0 1rem;
        border-bottom: solid 1px #f3c050;
      }
    }
  }
  .category {
    position: absolute;
    left: 27%;
    bottom: 35%;
    width: 10.9375rem;
    height: 9.25rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
  }
}
</style>
